@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body {
  background: #000
    url("https://tva1.sinaimg.cn/large/ea98bce0gy1h04p5oagyaj21z418g1kx.jpg");
  /* 背景图片 */
  background-attachment: fixed;
  /* fixed，当页面的其余部分滚动时，背景图像不会移动。
  scroll，默认值。背景图像会随着页面其余部分的滚动而移动。
  inherit，规定应该从父元素继承 background-attachment 属性的设置。 */
  background-blend-mode: hard-light;
  /* 定义每个背景层（颜色和/或图像）的混合模式,打强光 */
}

.container {
  /* 类选择器 */
  position: absolute;
  /* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。绝对定位 */
  top: 80px;
  left: 100px;
  right: 100px;
  bottom: 80px;
  background: url("https://tva1.sinaimg.cn/large/ea98bce0gy1h04p5oagyaj21z418g1kx.jpg");
  background-attachment: fixed;
  /* 锁定背景 */
  display: flex;
  /* 弹性布局，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效 */
  justify-content: cente r;
  /* 即 flex 子元素在 flex 容器中，水平居中。 */
  align-items: center;
  /* 垂直居中 */
  flex-direction: column;
  /* 作为列，垂直地显示弹性项目 */
  box-shadow: 0 50px 50px rgba(0, 0, 0, 0.5), 0 0 0 100px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
}

.container h2 {
  /* 后代选择器 */
  text-align: center;
  font-size: 10em;
  /* 设置的是字体中字符框的高度 */
  line-height: 0.7em;
  color: #333;
  margin-top: -80px;
}

.container h2 span {
  display: block;
  font-weight: 300;
  letter-spacing: 6px;
  /* 属性增加或减少字符间的空白（字符间距）。定义字符间的固定空间（允许使用负值）。 */
  font-size: 0.2em;
}
.countdown {
  display: flex;
  margin-top: 50px;
}
.countdown div {
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: #333;
  color: #fff;
  margin: 0 15px;
  font-size: 3em;
  font-weight: 500;
}
.countdown div:before {
  /* 伪类，指定要选择的元素的特殊状态*/
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 35px;
  background: #ff0;
  color: #333;
  font-size: 0.35em;
  line-height: 35px;
  font-weight: 300;
}
.container #day:before {
  /* id：day选择器，伪类 */
  content: "Days";
  /* 在时间下面加一个Days */
}
.container #hour:before {
  content: "Hours";
}
.container #minute:before {
  content: "Minutes";
}
.container #second:before {
  content: "Seconds";
}
